<template>
    <div class="vdirective">
        <h2>Vue.directive</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            常用的v-show, v-on, v-bind等，都是Vue内置的指令，<br>
            也就是说，它们都是由Vue作者来定义的。<br>
            而directive的作用，就是程序员自己来定义一个指令。
            这种自定义指令，常常是需要操作dom时使用。<br>
            自定义指令，根据使用范围，有全局和局部两种定义方式。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag>
        <div class="cont">
            <p class="decr">这里用一下官方文档的例子，定义一个v-focus指令，让输入框自动获取焦点。<br>
                在使用了v-focus指令后，刷新一下该页面，就可以看到输入框自动获取到焦点了。<br>
                这个知识点，在官方文档中写的还是挺详细的，可以查看官方文档：
                <el-tag>
                    <a 
                        href="https://cn.vuejs.org/v2/guide/custom-directive.html" 
                        style="color: #333;" 
                        target="_blank"
                        >查看文档</a>
                </el-tag>
            </p>
            <el-input placeholder="请输入内容" v-focus></el-input>
        </div>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

// 第一种：注册全局的自定义指令
// import Vue from 'vue';

// Vue.directive('focus', {
//     // 当页面在渲染到该dom时
//     inserted: function(el) {
//         console.log('el: ', el)
//         // el.documntfocus();
//         el.querySelector('input').focus();
//     }
// })

export default {
    name: 'Vdirective',
    mixins: [mixinPage],
    // 第二种：注册局部自定义指令，也就是只能在当前组件里用
    directives: {
        focus: {
            inserted: function(el) {
                el.querySelector('input').focus();
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';

.el-input {
    max-width: 200px;
    margin-top: 10px;
}
</style>